<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  <title>给好朋友的生日祝福</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      touch-action: pan-y;
    }
    body {
      background: #ffcce6; /* 更柔和的粉色 */
      height: 100vh;
      overflow: hidden;
      font-family: 'Microsoft YaHei', sans-serif; /* 更适合中文的字体 */
    }
    #ppt-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
    }
    .ppt-page {
      position: absolute;
      width: 100%;
      height: 100%;
      display: none;
      padding: 20px;
      background: #ffcce6;
      overflow: hidden;
    }

    /* 通用文字样式 */
    .text-content {
      font-size: 18px;
      line-height: 1.6;
      margin: 15px 0;
      text-align: left;
    }
    .title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
      color: #d23369;
    }

    /* 第一页：温馨祝福 */
    .page-1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 30px;
    }
    .page-1 img {
      width: 60%;
      max-height: 200px;
      margin: 20px auto;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      object-fit: cover;
    }

    /* 第二页：回忆时光 */
    .page-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr 1fr;
      gap: 15px;
      padding: 20px;
    }
    .page-2 .title {
      grid-column: span 2;
    }
    .page-2 img {
      width: 100%;
      height: 100%;
      max-height: 180px;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .page-2 .text-block {
      grid-column: span 2;
      background: rgba(255, 255, 255, 0.7);
      padding: 15px;
      border-radius: 10px;
    }

    /* 第三页：生日祝福 */
    .page-3 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 30px;
    }
    .page-3 .blessing {
      background: rgba(255, 255, 255, 0.8);
      padding: 20px;
      border-radius: 15px;
      margin: 15px 0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .page-3 img {
      width: 50%;
      max-height: 180px;
      margin: 10px auto;
      border-radius: 10px;
      object-fit: cover;
    }

    /* 文字动画 */
    .animate-text {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s forwards;
    }
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 页面指示器 */
    .page-indicator {
      position: fixed;
      bottom: 20px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(210, 51, 105, 0.3);
      transition: all 0.3s;
    }
    .dot.active {
      background: #d23369;
      transform: scale(1.2);
    }

    /* 返回按钮 */
    #back-btn {
      position: fixed;
      top: 20px;
      left: 20px;
      font-size: 16px;
      background-color: rgba(210, 51, 105, 0.7);
      color: white;
      padding: 8px 15px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      z-index: 100;
      display: none;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
<audio id="bgMusic" src="./static/music/未闻花名.mp3" autoplay loop></audio>
<div id="ppt-container">
  <!-- 第一页：温馨祝福 -->
  <div class="ppt-page page-1">
    <p class="title animate-text" style="animation-delay: 0.2s">亲爱的朋友，生日快乐！</p>
    <div class="text-content animate-text" style="animation-delay: 0.4s">
      <p>在这个特别的日子里，我想对你说：</p>
      <p>感谢你一直以来的陪伴和支持，你是我生命中最珍贵的朋友之一。</p>
      <p>愿你的每一天都充满阳光和欢笑，愿所有的美好都如期而至！</p>
    </div>
    <img src="./static/image/微信图片_20250512235820.jpg" alt="好朋友合照" class="animate-text" style="animation-delay: 0.6s">
  </div>

  <!-- 第二页：回忆时光 -->
  <div class="ppt-page page-2">
    <p class="title animate-text" style="animation-delay: 0.2s">我们的美好回忆</p>
    <img src="./static/image/微信图片_20250512235820.jpg" alt="回忆1" class="animate-text" style="animation-delay: 0.4s">
    <img src="./static/image/微信图片_20250512235820.jpg" alt="回忆2" class="animate-text" style="animation-delay: 0.5s">
    <div class="text-block animate-text" style="animation-delay: 0.7s">
      <p>还记得我们一起度过的那些时光吗？从相识到相知，每一次欢笑、每一次谈心，都成为我最珍贵的记忆。</p>
      <p>无论是一起疯玩的日子，还是互相安慰的时刻，都让我感受到友情的温暖。</p>
    </div>
  </div>

  <!-- 第三页：生日祝福 -->
  <div class="ppt-page page-3">
    <p class="title animate-text" style="animation-delay: 0.2s">真挚的祝福</p>
    <div class="blessing animate-text" style="animation-delay: 0.4s">
      <p>🎂 愿你新的一岁：</p>
      <p>✨ 心想事成，梦想成真</p>
      <p>💖 身体健康，天天开心</p>
      <p>🌟 事业顺利，前程似锦</p>
      <p>🍀 好运连连，幸福满满</p>
    </div>
    <img src="./static/image/微信图片_20250512235820.jpg" alt="生日祝福" class="animate-text" style="animation-delay: 0.6s">
    <div class="blessing animate-text" style="animation-delay: 0.8s">
      <p>未来的日子里，愿我们依然能分享彼此的喜怒哀乐，一起创造更多美好的回忆！</p>
      <p>生日快乐，我最好的朋友！</p>
    </div>
  </div>

  <div class="page-indicator"></div>
</div>
<button id="back-btn">返回</button>
<audio id="ppt-audio" src="./static/music/未闻花名.mp3"></audio>

<script>
  const pptContainer = document.getElementById("ppt-container");
  const pptPages = document.querySelectorAll(".ppt-page");
  const pageIndicator = document.querySelector(".page-indicator");
  const backBtn = document.getElementById("back-btn");
  const pptAudio = document.getElementById("ppt-audio");

  let currentPage = 0;
  let startY = 0;
  let isMoving = false;
  let touchStartTime = 0;
  window.onload = () => {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get("playMusic") === "1") {
      const music = document.getElementById("bgMusic");
      // 为了兼容移动端自动播放限制
      music.play().catch(() => {
        // 用户必须手动交互，创建点击事件尝试播放
        document.body.addEventListener('touchstart', () => {
          music.play();
        }, { once: true });
      });
    }
  };
  // 初始化页面指示器
  function initPageIndicator() {
    pageIndicator.innerHTML = '';
    pptPages.forEach((_, index) => {
      const dot = document.createElement("div");
      dot.className = "dot";
      if (index === 0) dot.classList.add("active");
      dot.addEventListener("click", () => goToPage(index));
      pageIndicator.appendChild(dot);
    });
  }

  // 重置所有动画元素
  function resetAnimations() {
    document.querySelectorAll('.animate-text').forEach(el => {
      el.style.opacity = '0';
      el.style.transform = 'translateY(20px)';
    });
  }

  // 触发当前页动画
  function triggerAnimations() {
    const currentPageEl = pptPages[currentPage];
    const animElements = currentPageEl.querySelectorAll('.animate-text');

    animElements.forEach(el => {
      const delay = el.style.animationDelay || '0s';
      el.style.animation = 'none';
      void el.offsetWidth; // 触发重绘
      el.style.animation = `fadeInUp 0.8s forwards ${delay}`;
    });
  }

  // 跳转到指定页面
  function goToPage(pageIndex) {
    if (pageIndex < 0 || pageIndex >= pptPages.length) return;

    // 隐藏当前页
    pptPages[currentPage].style.display = "none";

    // 重置动画状态
    resetAnimations();

    currentPage = pageIndex;

    // 显示新页面
    if (currentPage === 1) {
      pptPages[currentPage].style.display = "grid";
    } else {
      pptPages[currentPage].style.display = "flex";
    }

    // 触发动画
    setTimeout(triggerAnimations, 50);

    // 更新页面指示器
    document.querySelectorAll(".dot").forEach((dot, index) => {
      if (index === currentPage) {
        dot.classList.add("active");
      } else {
        dot.classList.remove("active");
      }
    });
  }

  // 显示PPT
  function showPPT() {
    document.body.style.background = "#ffcce6";
    pptContainer.style.display = "block";
    goToPage(0);
    pptAudio.play();
    backBtn.style.display = "block";
  }

  // 返回按钮事件
  backBtn.addEventListener("click", () => {
    window.location.href = 'index.html?playMusic=1';
  });

  // 触摸事件处理
  pptContainer.addEventListener("touchstart", (e) => {
    startY = e.touches[0].clientY;
    isMoving = false;
    touchStartTime = Date.now();
  });

  pptContainer.addEventListener("touchmove", (e) => {
    const y = e.touches[0].clientY;
    const diff = y - startY;

    // 只有当移动距离足够大时才触发翻页
    if (Math.abs(diff) > 50 && !isMoving) {
      isMoving = true;

      if (diff > 0 && currentPage > 0) {
        // 向下滑动，上一页
        goToPage(currentPage - 1);
      } else if (diff < 0 && currentPage < pptPages.length - 1) {
        // 向上滑动，下一页
        goToPage(currentPage + 1);
      }
    }
  });

  pptContainer.addEventListener("touchend", (e) => {
    // 处理快速轻扫
    const touchDuration = Date.now() - touchStartTime;
    const endY = e.changedTouches[0].clientY;
    const diff = endY - startY;
    const isQuickSwipe = touchDuration < 300 && Math.abs(diff) > 30;

    if (isQuickSwipe && !isMoving) {
      if (diff > 0 && currentPage > 0) {
        goToPage(currentPage - 1);
      } else if (diff < 0 && currentPage < pptPages.length - 1) {
        goToPage(currentPage + 1);
      }
    }

    isMoving = false;
  });

  // 鼠标滚轮事件处理
  pptContainer.addEventListener("wheel", (e) => {
    e.preventDefault();

    // 防止快速滚动多次触发
    if (isMoving) return;
    isMoving = true;

    setTimeout(() => { isMoving = false; }, 500);

    if (e.deltaY > 0 && currentPage < pptPages.length - 1) {
      // 向下滚动，下一页
      goToPage(currentPage + 1);
    } else if (e.deltaY < 0 && currentPage > 0) {
      // 向上滚动，上一页
      goToPage(currentPage - 1);
    }
  });

  // 键盘事件处理
  document.addEventListener("keydown", (e) => {
    if (pptContainer.style.display !== "block") return;

    if (e.key === "ArrowDown" && currentPage < pptPages.length - 1) {
      goToPage(currentPage + 1);
    } else if (e.key === "ArrowUp" && currentPage > 0) {
      goToPage(currentPage - 1);
    }
  });

  // 初始化
  initPageIndicator();

  // 显示PPT
  showPPT();
</script>
</body>
</html>